<template name='photos'>
	<view class="main" @click="hideModal">
		<img src='../../static/tree.png' class="tree-image"/>
		<view class='header'>
			<view class='cloud--animation cloud'>
			    <view class="bg-img cloud-img"></view>
			</view>
		</view>
		<view class="flex justify-center align-center">
			<button class="cu-btn bg-gradual-red text-lg photo-btn" @click="uploadPhoto">
				<text class="cuIcon-camera"></text>
			</button>
		</view>
		<view class="cu-modal" :class="isDisplay?'show':''">
			<view class="cu-dialog" style="width: 600rpx;background-color: #FFFFFF; padding-top: 20px;padding-bottom: 20px;border-radius: 30rpx;">
				<view>
					<image mode="heightFix" :src="resultPic" style="height: 150px;width: 150px;"></image>
				</view>
                <view style="font-size: 28rpx;padding-top: 10px;">
                  {{garbageInfo[0].title}}  |  相似度：{{similarity}}
                </view>
				
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				isCard: false,
				isDisplay: false,
				garbageInfo: {},
				similarity:'',
				resultGarbageMap: {
					'其他垃圾': '/static/ResidualWaste.png',
					'厨余垃圾': '/static/FoodWaste.png',
					'可回收物': '/static/Recyclable.png',
					'有害垃圾': '/static/HazardousWaste.png'
				},
				resultPic:'/static/ResidualWaste.png'
			}
		},
		methods: {
			uploadPhoto(e) {
				let that = this;
				wx.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						let tempFilePaths = res.tempFilePaths;
						wx.showLoading({
							title: "正在上传"
						});
						that.upload(tempFilePaths);
					}
				})
			},
			upload(path) {
				let that = this;
				
				wx.uploadFile({
					url: 'https://xcx.senlear.com/predictForXcx',
					filePath: path[0],
					name: 'file',
					header: {
						"Content-Type": "multipart/form-data"
					},
					success(res) {
						if (res.statusCode != 200) {
							wx.showModal({
								title: '提示',
								content: '上传失败',
								showCancel: false
							});
							return;
						} else {
							console.log("res:",res)
							that.garbageInfo = JSON.parse(res.data)
							console.log("Result: ", that.garbageInfo)
							if (that.garbageInfo.length !== 0) {
								that.resultPic = that.resultGarbageMap[that.garbageInfo[0].name];
								that.similarity = (that.garbageInfo[0].similarity * 100).toFixed(2) + "%"
							}
							that.showModal()
						}
					},
					
					fail(e) {
						wx.showModal({
							title: '提示',
							content: '上传失败',
							showCancel: false
						});
					},
					complete() {
						wx.hideLoading()
					}
				})
			},
			showModal(e) {
				this.isDisplay = true
			},
			hideModal(e) {
				this.isDisplay = false
			}
		}
	}
</script>

<style scoped>
	center {
		top: 300px;
	}

	.main {
		width: 100%;
		height: 100%;
		position: fixed;
		flex-direction: column;
		justify-content: space-around;
		background-color: #fff8f0;
	}

	.background-tree{
		bottom: 70px;
		width: 100%;
		background-image: url(../../static/tree.png);
	}

	.header {
		margin-top: 130rpx;
		height: 200px;
	}

	.cloud {
		/* display: inline-block; */
	}


	.cloud-img {
		height: 115px;
		width: 45%;
		background-image: url(../../static/cloud1.png);
	}

	.cloud--animation {
		position: relative;
		animation: arrow_float 2s ease-in-out infinite;
	}

	@keyframes arrow_float {
	  0% {
	    transform: translateY(0px);
	  }

	  50% {
	    transform: translateY(10px);
	  }

	  100% {
	    transform: translateY(0px);
	  }
	}

	.tree-image {
		position: absolute;
		left: 0;
		bottom: 70px;
		display: block;
		width: 100%;
		z-index: -999;
	}

	.photo-btn {
		padding: 80upx;
		border-radius: 50%;
		height: 160px;
		width: 160px;
		background-image: linear-gradient(45deg, #99d98c, #168aad);
		color: #f8f9f9;
	}

	.photo-btn text {
		font-size: 5rem;
	}

	.cu-bar {
		min-height: 80rpx;
	}
</style>
